<!-- 展示某个游戏的所有可售卖规格 -->
<template>
    <div>
        <el-button type="success" class="el-icon-shopping-cart-full" round
            @click="openPayView(game)">
            前往挑选
        </el-button>
        <el-dialog
            :title="`《${gameDataForPayView.fullName}》`"
            :visible.sync="payVisible"
            width="60%"
            :center="true"
            :before-close="handleClose">
            <el-row>
                <el-col :span="6" v-for="gs in getGameSpecification()" :key="gs.id">
                    <span>
                        {{gameSpecificationTransition(gs.specification)}}
                    </span>
                    <br><br>
                    <el-card :body-style="{ padding: '0px' }">
                        <el-image
                            style="width: 300px; height: 180px"
                            :src="gs.gamePhoto"
                            :preview-src-list="[gs.gamePhoto]"
                            fit="fill">
                        </el-image>
                        <div style="padding: 14px;">
                            <span v-if="game.classesId===others.categoryId" style="color: red;">
                                ❌原价：{{gs.gameValue}}$<br><br>
                            </span>
                            <span style="color: green;">
                                ✔现价：{{getRealValue(gs.gameValue,game.classesId)}}$
                            </span>
                            <br><br>
                            <div class="bottom clearfix">
                            <el-button type="primary" @click="payMoney(gs)" round>
                                购买&emsp;<i class="el-icon-present"></i>
                            </el-button>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </el-dialog>
    </div>
</template>

<script>
import axios from 'axios';
export default {
    name:'basePayPage',
    props:['game','allGameSpecification','others'],
    data() {
        return {
            gameDataForPayView:{
                id:'',
                simpleName:'',
                fullName:'',
                classesId:'',
            },
            payVisible:false,
            keyOrder:{
                shouldPay:'',
                realPay:'',
                specificationId:'',
                clienteleId:'',
            }
        };
    },
    methods:{
        openPayView(game){//打开弹窗时为其赋值this.gameDataForPayView
            this.payVisible=true;
            this.gameDataForPayView=game;
        },
        handleClose(){//关闭弹窗时初始化this.gameDataForPayView
            this.payVisible=false;
            this.gameDataForPayView={
                id:'',
                simpleName:'',
                fullName:'',
                classesId:'',
            };
            this.keyOrder={
                shouldPay:'',
                realPay:'',
                specificationId:'',
                clienteleId:'',
            };
        },
        getGameSpecification(){
            var gameSpecification=[];
            this.allGameSpecification.forEach((gs)=>{
                if(gs.gameId===this.game.id){
                    gameSpecification.push(gs);
                }
            })
            return gameSpecification;
        },
        gameSpecificationTransition(val){//转换游戏的具体规格名
            if(val==='T'){
                return "标准版";
            }else if(val==='S'){
                return "导剪版";
            }else if(val==='G'){
                return "黄金版";
            }else if(val==='L'){
                return "终极版";
            }
        },
        getRealValue(val,id){//处理折扣金额
            if(id===this.others.categoryId){
                return (this.others.discount*val).toFixed(2);
            }
            return val;
        },
        payMoney(gs){//生成订单
            if(localStorage.getItem('clientele')===null){
                alert("您还未登录，请先登录再购买");
                this.$router.replace({
                    name:'loginPage',
                })
                return;
            }
            if(confirm("确定购买吗？")){
                this.keyOrder.shouldPay=gs.gameValue;
                this.keyOrder.realPay=this.getRealValue(gs.gameValue,this.game.classesId);
                this.keyOrder.specificationId=gs.id;
                this.keyOrder.clienteleId=JSON.parse(localStorage.getItem('clientele')).id;
                axios(
                    {
                        method:'post',
                        url:'/keyorder/createOrder',
                        data:this.keyOrder
                    }
                ).then(
                    response=>{
                        if(response.data.data){
                            alert("购买成功✔，请前往订单中心及时查看并激活使用");
                        }else{
                            alert("购买失败❌，您的账户余额只有“"+JSON.parse(localStorage.getItem('clientele')).gameMoney+"”💵请充值后再次尝试购买");
                        }
                    }
                )
                this.handleClose();
            }
        }
    }
}
</script>
<style scoped>
</style>